<script setup lang="ts">
import { PropType, watch, ref } from "vue";
const
  props = defineProps({
    active: { type: Object as PropType<gt.components.SideBar.Action> },
    data: { type: Object as PropType<gt.components.SideBar.Action>, required: true },
  }),
  entity = ref<HTMLDivElement>(),
  animationDelay = ref(""),
  openHeight = ref(""),
  closeHeight = ref(""),
  emit = defineEmits<{ (event: "action", value: gt.components.SideBar.Action, e: MouseEvent): void; }>(),
  open = ref<string>(),
  show = ref(false);
function setOpen(active?: gt.components.SideBar.Action, data = props.data) {
  if (active && (
    active._symbol == data._symbol || data.children?.some((p) => setOpen(active, p)))) {
    setAttrs();
    return open.value = "open";
  }
  return open.value = undefined;
}
function childrenClick(e: MouseEvent) {
  if (open.value) {
    open.value = undefined;
  } else {
    emitf(props.data, e);
  }
}
function emitf(d: gt.components.SideBar.Action, e: MouseEvent) {
  e.stopPropagation();
  emit("action", d, e);
  setOpen(d);
}
function setAttrs() {
  if (!show.value) {
    show.value = true;
    next(() => {
      if (entity.value?.children[1]?.clientHeight) {
        const t = entity.value.offsetHeight;
        openHeight.value = t + "px";
        animationDelay.value = (t < 300 ? 300 : t) + "ms";
        closeHeight.value = "0";
      } else { next(setAttrs); }
    });
  }
}
watch(() => props.active, (d) => { setOpen(d); });
</script>
<template>
  <div class="ActionEle y" v-if="data" :class="open" ref="entity">
    <div :class="['label txt-hid x zb', active?._symbol == data._symbol ? 'active' : '', data.labelcls]"
      @click.stop="emitf(data, $event)">
      <span>{{ data._symbol?.description }}</span>
      <div class="btns x">
        <el-tooltip v-if="data._create" content="新增">
          <i class="add" @click.stop="data._create(data, $event)" />
        </el-tooltip>
        <el-tooltip v-if="data._update" content="修改">
          <i class="edit" @click.stop="data._update(data, $event)" />
        </el-tooltip>
        <el-tooltip v-if="data._read" content="查看">
          <i class="read" @click.stop="data._read(data, $event)" />
        </el-tooltip>
        <el-tooltip v-if="data._delete" content="删除">
          <i class="del" @click.stop="data._delete(data, $event)" />
        </el-tooltip>
        <el-tooltip v-if="data.children?.length" :content="open ? '收起' : '展开'">
          <i class="hasChildren" @click.stop="childrenClick" />
        </el-tooltip>
      </div>
    </div>
    <div v-if="show && data.children?.length" class="children pl04em">
      <ActionEle v-for="(d, i) in data.children" :class="d.cls" :active="active" @action="emitf" :key="i" :data="d" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.ActionEle {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  height: max-content;


  >.label {
    position: relative;
    cursor: pointer;
    padding: 1em;
    border-bottom: 1px solid var(--color-line);
    color: var(--color-text-b);

    &:hover {
      background-image: linear-gradient(to top, var(--color-bklight), 1%, transparent 50%);
    }

    &::before {
      margin-right: 0.4em;
      font-size: 1.2em;
    }

    >.btns {
      flex-shrink: 0;


      >i {
        &::after {
          font-size: 1.2em;
        }

        &:hover::after {
          // font-size: 1.4em;
          color: var(--color-hover);
          font-weight: 600;
          box-shadow: 0 0 10px #000;
          border-radius: 50%;
        }
      }

      >.add::after {
        content: "\e645";
      }

      >.edit::after {
        content: "\e64f";
      }

      >.del::after {
        content: "\e635";
      }

      >.read::after {
        content: "\e61e";
      }

      >.hasChildren::after {
        content: "\e604";

      }

      >.hasChildren {
        transition: transform 500ms;
      }
    }
  }

  >.active {
    background-image: linear-gradient(to top, var(--color-bklight), 1%, transparent 50%);
  }

  >.children {
    overflow: hidden;
    max-height: v-bind(closeHeight);
    transition: max-height v-bind(animationDelay);
  }
}

.open {
  >.label>.btns>.hasChildren {
    transform: rotate(-180deg);
  }

  >.children {
    max-height: v-bind(openHeight);
  }
}
</style>